<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2023-02-20 14:25:44
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-11-29 14:50:31
 * @FilePath: \jzjypc4.2\src\views\PersonalCenter\MyIndex\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/我的首页 -->
  <div id="container">
    <!-- 我的首页 -->
    <div class="content" v-if="onRoutes">
      <div class="top">
        <div class="left">
          <div class="headpic">
            <img :src="file_url" alt="" v-if="file_url != ''" />
            <img src="../../../assets/img/mrtx.png" v-if="file_url == ''" />
          </div>
          <div class="shenfen">
            {{ zhiwu_title }}
          </div>
        </div>
        <div class="right">
          <div class="nickname">
            <span>账号昵称：</span>
            <span>{{ nickname }}</span>
            <span @click="goPersonalMsg"><a>查看个人信息</a></span>
          </div>
          <div class="school">
            <span>所在学校：</span>
            <span>{{ school_title }}</span>
          </div>
          <div class="banben">
            <span>使用版本</span>
            <img
              src="../../../assets/img/42shiyongban.png"
              alt=""
              v-if="is_sy == 1"
            />
            <img
              src="../../../assets/img/42zhengshiban.png"
              alt=""
              v-if="is_sy == 0"
            />
          </div>
          <div class="daoqiDate" v-if="is_sy == 1">
            <a>{{ numDay }}</a
            >天后到期，如继续使用，请联系客服进行开通
          </div>
        </div>
      </div>
      <h4>我的学习记录</h4>
      <div class="mystudy">
        <div class="mydownload" @click="godownload">
          <span style="color:#101D60"
            ><a>{{ downLoadNum }}</a
            >条</span
          >
        </div>
        <div class="myactive" @click="goMyactive">
          <span style="color:#3B256F"
            ><a>{{ activeNum }}</a
            >次</span
          >
        </div>
        <div class="myteachplan" @click="goMyteachplan">
          <span style="color:#004463" v-if="kejianbooks_title !=''"
            ><a>{{ kejianbooks_title }}-{{ kejianchapters_title }}</a></span
          >
          <span style="color:#004463" v-if="kejianbooks_title ==''"
            ><a>{{ timelineTitle }}</a></span
          >
        </div>
      </div>
      <h4 v-show="activeLists.length != 0">已预约课程</h4>
      <div class="classBox" v-show="activeLists.length != 0">
        <div class="activeLists">
          <div
            class="activeBox"
            v-for="item in activeLists.slice(0, 2)"
            :key="item.id"
            @click="goActiveDetails(item.id)"
          >
            <div class="pic">
              <img :src="item.file_url" alt="" />
            </div>
            <div class="msg">
              <div class="boxtitle">
                {{ item.title }}
              </div>
              <div class="update" v-show="item.type_id == 2">
                <h6>近期更新：</h6>
                <span v-for="list in item.gx_lists" :key="list.id"
                  >{{ list.title }} {{ list.zhang_title }}</span
                >
              </div>
              <div class="yuyuemsg" v-if="false && item.type_id == 1">
                为教学团队定制一份专属的活动课表吧
              </div>
              <div
                class="activetime"
                v-if="item.bm_status != 1 && item.type_id == 1"
              >
                活动时间：{{ timeStamp2String(item.start_time * 1000, 2) }} （{{
                  timeStamp2String(item.start_time * 1000, 11)
                }}）{{ timeStamp2String(item.start_time * 1000, 5) }}
              </div>
              <div class="upnum" v-if="item.hdxd_nums > 0 && item.type_id == 1">
                活动心得已更新<a>{{ item.hdxd_nums }}</a
                >份
              </div>
              <div
                class="noxinde"
                v-if="
                  item.hdxd_nums == 0 &&
                  item.bm_status == 1 &&
                  item.type_id == 1
                "
              >
                暂无活动心得上传更新
              </div>
            </div>
            <div class="dosome">
              <div
                class="gostudy"
                v-if="item.type_id == 2 && item.bm_status == 1"
              >
                进入学习
              </div>
              <div
                class="goyuyue"
                v-if="item.type_id == 2 && item.bm_status == 0"
              >
                立即预约
              </div>
              <div
                class="gobm"
                v-if="
                  item.type_id == 1 &&
                  item.bm_status != 1 &&
                  item.end_time * 1000 > new Date().getTime()
                "
              >
                报名
              </div>
              <div
                  class="gobm"
                  v-if="
                    item.type_id == 1 &&
                    item.bm_status == 1 &&
                    item.start_time * 1000 > new Date().getTime()
                  "
                >
                  已报名
                </div>
              <div
                class="gohuifang"
                v-if="
                  item.type_id == 1 &&
                  item.end_time * 1000 < new Date().getTime()
                "
              >
                查看回放
              </div>
              <div
                class="gozhibo"
                v-if="
                  item.type_id == 1 &&
                  item.bm_status == 1 &&
                  item.start_time * 1000 < new Date().getTime() &&
                  item.end_time * 1000 > new Date().getTime()
                "
              >
                进入直播
              </div>
            </div>
          </div>
        </div>
      </div>
      <h4>推荐关注</h4>
      <div class="evm">
        <div class="ptevm">
          <h5 v-if="kemu_id == 1">语文教研小助手</h5>
          <h5 v-if="kemu_id == 3">英语教研小助手</h5>
          <div class="pic">
            <img :src="gzh_file_url" alt="" />
          </div>
          <span>微信扫码关注</span>
        </div>
        <div class="ywevm">
          <h5>精准教研小程序</h5>
          <div class="pic">
            <img :src="xcx_file_url" alt="" />
          </div>
          <span>微信扫码关注</span>
        </div>
        <!-- <div class="yyevm">
          <h5>教研教学平台小程序</h5>
          <div class="pic">
            <img :src="xcx_file_url" alt="" />
          </div>
          <span>微信扫码关注</span>
        </div> -->
      </div>
      <div class="tips">
        <p>
          温馨提示：扫码关注以上小程序或公众号，即可获得更多活动预约提醒及资源推送
        </p>
      </div>
    </div>
    <!-- 个人信息 -->
    <router-view />
  </div>
</template>

<script>
import {
  sysinfo,
  userinfo,
  xzjl,
  activitylists_my,
  nowkemu,
} from "../../../api/http";
import { timeStamp2String } from "../../../utils/time";
export default {
  name: "MyIndex",
  components: {},
  data() {
    return {
      timeStamp2String,
      enen: "",
      file_url: "", //头像地址
      zhiwu_title: "", //职务名称
      nickname: "", //昵称
      is_sy: "", //是否试用版
      numDay: "", //使用剩余天数
      school_title: "", //所在学校
      downLoadNum: "", //下载数量
      activeNum: "", //参与活动数量
      kejianbooks_title: "", //书本
      kejianchapters_title: "", //目录
      gzh_file_url: "", //xiaozhushou二维码
      xcx_file_url: "", //校验平台小程序二维码
      ywevm: "", //校验平台二维码
      yyevm: "", //校验平台二维码
      activeLists: [], //预约活动列表
      kemu_id:'',//科目id
      timelineTitle:'',//没有计划是的关键时间节点名称
    };
  },
  created() {
    // console.log(this.$route.path)
    //获取系统信息
    sysinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "系统信息");
      if (res.retInt != 1) {
        this.$message(res.retErr);
      } else {
        const data = res.retRes;
        // this.telphone = data.telphone;
        this.dhkf_time = data.dhkf_time;
        this.ywevm = data.kf_file_url;
        this.gzh_file_url = data.gzh_file_url;
        this.xcx_file_url = data.xcx_file_url;
        this.yyevm = data.tskf_file_url;
      }
    });
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "个人信息");
        const data = res.retRes;
        this.file_url = data.file_url;
        this.zhiwu_title = data.zhiwu_title;
        this.nickname = data.title;
        this.school_title = data.school_title;
        this.kemu_id = data.kemu_id
        // this.is_sy = data.is_sy;
        if(data.type_id == 2){
          this.is_sy = 1;
          this.numDay = Math.floor(
            (res.retRes.sy_end_time * 1000 - Date.parse(new Date())) /
              (24 * 3600 * 1000)
          );
        }else{
          this.is_sy == 0
        }
      }
    });
    this.getdownLoad(); //获取下载数量
    this.getactive(); //获取活动
    this.getTeachplan(); //获取教学计划
  },
  computed: {
    onRoutes() {
      const route = this.$route;
      const { path } = route;
      if (path == "/personal") {
        return true;
      }
      return false;
    },
  },
  methods: {
    //获取教学计划
    getTeachplan() {
      nowkemu({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        // console.log(res)
        this.kejianbooks_title = res.retRes.kejianbooks_title;
        this.kejianchapters_title = res.retRes.kejianchapters_title;
        this.timelineTitle = res.retRes.timeline.title
      });
    },
    //获取下载记录
    getdownLoad() {
      xzjl({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        // console.log(res,"活动")
        this.downLoadNum = res.retCounts;
      });
    },
    //获取参与活动
    getactive() {
      activitylists_my({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        console.log(res, "活动");
        this.activeNum = res.retCounts;
        this.activeLists = res.retRes;
      });
    },
    //查看个人信息页面
    goPersonalMsg() {
      // this.indexShow = false;
      this.$router.push({
        name: "PersonalMsg",
      });
    },
    //前往我的下载页面
    godownload() {
      this.$router.push({
        name: "MyDownLoad",
      });
    },
    //前往我的活动页面
    goMyactive() {
      this.$router.push({
        name: "MyActive",
      });
    },
    //前往我的教学计划页面
    goMyteachplan() {
      this.$router.push({
        name: "MyTeachPlan",
      });
    },
    //去活动详情
    goActiveDetails(id) {
      let { href } = this.$router.resolve({
        path: "/active/activeDetails",
        query: {
          id: id,
        },
      });
      window.open(href, "activeRes");
    },
  },
};
</script>
<style lang="less" scoped>
#container {
  .content {
    margin-left: 40px;
    .top {
      display: flex;
      margin-top: 40px;
      width: 820px;
      border-bottom: 1px solid #dee0e3;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 132px;
        .headpic {
          margin-bottom: 10px;
          width: 100px;
          border-radius: 50%;
          img {
            width: 100px;
            border-radius: 50%;
          }
        }
        .shenfen {
          margin-bottom: 40px;
          width: 72px;
          height: 20px;
          background: #08a579;
          border-radius: 4px 8px 4px 8px;
          font-size: 12px;
          color: #fff;
          line-height: 20px;
          text-align: center;
        }
      }
      .right {
        margin-left: 90px;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        span {
          display: inline-block;
          margin-bottom: 20px;
          font-size: 14px;
          color: #444;
          a {
            margin-left: 30px;
            color: #08a579;
            cursor: pointer;
          }
        }
        img {
          position: relative;
          top: 4px;
          left: 16px;
          width: 64px;
          border-radius: 2px;
        }
        .daoqiDate {
          margin: 0 auto;
          // margin-bottom: 30px;
          text-align: center;
          width: 260px;
          line-height: 28px;
          height: 28px;
          overflow: hidden;
          background: linear-gradient(
            20deg,
            #dfae78,
            #f2c491,
            #f4c998,
            #f8d6af
          );
          border-radius: 3px;
          font-size: 12px;
          color: #333333;
          a {
            color: #f05659;
          }
        }
      }
    }
    h4 {
      margin-top: 28px;
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    .mystudy {
      display: flex;
      margin-top: 28px;
      padding-bottom: 30px;
      width: 820px;
      border-bottom: 1px solid #dee0e3;
      .mydownload {
        margin-left: 20px;
        width: 200px;
        height: 120px;
        background-image: url("../../../assets/img/42mydownload.png");
        background-size: 100%;
        background-repeat: no-repeat;
        cursor: pointer;
        span {
          display: inline-block;
          margin-top: 83px;
          margin-left: 14px;
          color: #101d60;
          a {
            margin-right: 4px;
            font-size: 20px;
            color: #101d60;
            font-weight: 600;
          }
        }
      }
      .myactive {
        margin-left: 80px;
        width: 200px;
        height: 120px;
        background-image: url("../../../assets/img/42myactive.png");
        background-size: 100%;
        background-repeat: no-repeat;
        cursor: pointer;
        span {
          display: inline-block;
          margin-top: 83px;
          margin-left: 14px;
          color: #3B256F;
          a {
            margin-right: 4px;
            font-size: 20px;
            color: #3B256F;
            font-weight: 600;
          }
        }
      }
      .myteachplan {
        margin-left: 80px;
        width: 200px;
        height: 120px;
        background-image: url("../../../assets/img/42myteachplan.png");
        background-size: 100%;
        background-repeat: no-repeat;
        cursor: pointer;
        span {
          display: inline-block;
          margin-top: 83px;
          margin-left: 14px;
          margin-right: 8px;
          color: #004463;
          a {
            margin-right: 4px;
            font-size: 12px;
            color: #004463;
            font-weight: 600;
          }
        }
      }
    }
    .classBox {
      margin-top: 20px;
      padding-bottom: 10px;
      width: 820px;
      border-bottom: 1px solid #dee0e3;
      .activeLists {
        .activeBox {
          position: relative;
          display: flex;
          margin-left: 20px;
          margin-bottom: 20px;
          cursor: pointer;
          .pic {
            margin-right: 19px;
            width: 240px;
            height: 136px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }
          .msg {
            position: relative;
            width: 360px;
            .boxtitle {
              margin-top: 10px;
              font-size: 14px;
              color: #333;
            }
            .update {
              margin-top: 18px;
              line-height: 24px;
              h6 {
                font-size: 12px;
                color: #333;
              }
              span {
                display: block;
                color: #939599;
              }
            }
            .yuyuemsg,
            .activetime,
            .upnum,
            .noxinde {
              position: absolute;
              bottom: 0;
              // margin-top: 84px;
              font-size: 12px;
              color: #939599;
              a {
                color: #f75059;
              }
            }
          }
          .dosome {
            div {
              position: absolute;
              right: 20px;
              bottom: 0;
              text-align: center;
              line-height: 32px;
              font-size: 12px;
              color: #fff;
              width: 100px;
              height: 32px;
              border-radius: 16px;
            }
            .gostudy {
              background: #08a579;
            }
            .goyuyue {
              background: #f85230;
            }
            .goyuyue,
            .gozhibo,
            .gobm {
              background: #f85230;
            }
            .gohuifang {
              background: #cccccc;
            }
          }
        }
        .activeBox:hover {
          .msg {
            .boxtitle {
              color: #08a579;
            }
          }
        }
      }
    }
    .evm {
      display: flex;
      margin: 28px 0;
      padding-bottom: 28px;
      width: 820px;
      // border-bottom: 1px solid #dee0e3;
      .ptevm,
      .ywevm,
      .yyevm {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 120px;
      }
      .ptevm {
        margin-left: 80px;
      }
      h5 {
        margin-bottom: 17px;
        font-size: 16px;
        color: #333;
        font-weight: 600;
      }
      .pic {
        margin-bottom: 18px;
        width: 100px;
        img {
          width: 100px;
        }
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }
    .tips {
      margin-bottom: 40px;
      p {
        text-align: center;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
